<template>
  <div class="app-container">
    <!-- 添加到我的关注 -->
    <el-dialog :title="title" :visible.sync="addOrUpdateParam.open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="股票code" prop="stockCode">
          <el-input v-model="form.stockCode" placeholder="请输入股票code"/>
        </el-form-item>
        <el-form-item label="股票名称" prop="stockName">
          <el-input v-model="form.stockName" placeholder="请输入股票名称"/>
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="form.groupId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortNum">
          <el-input v-model="form.sortNum" placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addMyAttention, updateMyAttention } from '@/api/eye/myAttention'
import { listStockGroupOption } from '@/api/eye/stockGroup'

export default {
  name: 'Stock',
  props: {
    addOrUpdateParam: {
      type: Object
    }
  },
  data() {
    return {
      options: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {
    console.log('-----------创建子组件-----------')
  },
  destroyed() {
    console.log('-----------销毁子组件-----------')
  },
  methods: {
    /** 添加股票提交按钮 */
    submitForm() {
      console.log(this.form)
      console.log('提交参数:' + JSON.stringify(this.form))
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMyAttention(this.form).then(response => {
              this.$modal.msgSuccess(response.msg)
              this.addOrUpdateParam.open = false
              this.$emit('update:visible', false)
              // 调用父组件的方法
              this.$emit('getList')
            })
          } else {
            addMyAttention(this.form).then(response => {
              this.$modal.msgSuccess(response.msg)
              this.addOrUpdateParam.open = false
              // 调用父组件的方法
              this.$emit('getList')
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.addOrUpdateParam.open = false
    },
    /** 新增或编辑操作 */
    handleAddOrUpdate(addOrUpdateParam) {
      console.log('这是子组件的弹窗')
      console.log(JSON.stringify(addOrUpdateParam))
      listStockGroupOption().then(response => {
        this.options = response.data
        this.form = JSON.parse(JSON.stringify(addOrUpdateParam))
      })
    }
  }
}
</script>
